<template>
  <IFexHeaderMain class="user_center_container">
    <template #header>
      <IHeader :bankUrl="'/pages/index/index'">个人中心</IHeader>
    </template>
    <view class="user_center_main whov">
      <view class="user_center_header">
        <UserInfoHeader></UserInfoHeader>
      </view>
      <view class="user_center_oper">
        <UserInfoOper></UserInfoOper>
      </view>
      <!-- 新增：日月年统计区域 -->
      <view class="user_count">
        <view class="count_title">使用统计</view>
        <view class="count_cards">
          <!-- 日统计 -->
          <view class="count_card">
            <uni-icons
              type="clock"
              size="24"
              color="#4096ff"
              class="count_icon"
            ></uni-icons>
            <view class="count_info">
              <text class="count_value">0次</text>
              <text class="count_label">今日使用</text>
            </view>
          </view>

          <!-- 月统计 -->
          <view class="count_card">
            <uni-icons
              type="calendar"
              size="24"
              color="#67c23a"
              class="count_icon"
            ></uni-icons>
            <view class="count_info">
              <text class="count_value">0次</text>
              <text class="count_label">本月使用</text>
            </view>
          </view>

          <!-- 年统计 -->
          <view class="count_card">
            <uni-icons
              type="calendar-filled"
              size="24"
              color="#fa8c16"
              class="count_icon"
            ></uni-icons>
            <view class="count_info">
              <text class="count_value">0次</text>
              <text class="count_label">本年使用</text>
            </view>
          </view>
        </view>
      </view>
      <view class="user_swiper">
        <UserSwiper />
      </view>
    </view>
    <template #footer><ITabBar :index="2" /></template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="userInfo">
import UserInfoHeader from "./components/UserInfoHeader.vue";
import UserInfoOper from "./components/UserInfoOper.vue";
import UserSwiper from "./components/UserSwiper.vue";
import ITabBar from "@/components/container/ITabBar.vue";
import IFexHeaderMain from "@/components/container/IFexHeaderMain.vue";
import IHeader from "@/components/container/IHeader.vue";
import { onBackPress } from '@dcloudio/uni-app'

</script>

<style scoped lang="scss">
.user_center_container {
  background: #f1f1f1;
  .user_center_main {
    background: #f1f1f1;
    .user_center_header {
    }
    .user_center_oper {
      margin: -40rpx 20rpx 20rpx;
    }
    .user_swiper {
      margin: 0rpx 20rpx 20rpx;
      border-radius: 8rpx;
      overflow: hidden;
    }
  }
}
// 新增：统计区域样式
.user_count {
  margin: 0 20rpx 30rpx;
  padding: 25rpx;
  background: #fff;
  border-radius: 12rpx;

  .count_title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
    padding-left: 5rpx;
  }

  .count_cards {
    display: flex;
    justify-content: space-between;
    gap: 15rpx;
  }

  .count_card {
    flex: 1;
    padding: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border-radius: 10rpx;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-3rpx);
      box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
    }
  }

  .count_icon {
    margin-bottom: 15rpx;
  }

  .count_info {
    text-align: center;
  }

  .count_value {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #1d2129;
    margin-bottom: 5rpx;
  }

  .count_label {
    font-size: 24rpx;
    color: #86909c;
  }
}
</style>
